<template>
    <el-row>
        <el-col>
            <select>
                <option v-for="item in treeData" :key="item.id" :value="item.id">
                    {{ item.name }}
                </option>
            </select>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="20">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column
                    v-if="tableData.some((row) => row.plate)"
                    prop="plate"
                    label="板块"
                    width="180"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.name)"
                    prop="name"
                    label="分类名称"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.productName)"
                    prop="productName"
                    label="项目名称"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.productType)"
                    prop="productType"
                    label="产品类别"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.itemType)"
                    prop="itemType"
                    label="项目类别"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.certification)"
                    prop="certification"
                    label="资质类型"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.certificate)"
                    prop="certificate"
                    label="证书"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.province)"
                    prop="province"
                    label="省份"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.level)"
                    prop="level"
                    label="级别"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.careerName)"
                    prop="careerName"
                    label="职业名称"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.careerDirection)"
                    prop="careerDirection"
                    label="职业方向"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.intercontinental)"
                    prop="intercontinental"
                    label="洲际"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.country)"
                    prop="country"
                    label="国家"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.patentType)"
                    prop="patentType"
                    label="专利类型"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.serverProduct)"
                    prop="serverProduct"
                    label="服务项目"
                    align="center"
                />
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button v-perms="['article:cate:edit']" type="primary" link>
                            选择
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    v-model:current-page="currentPage1"
                    :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                >
                </el-pagination>
            </div>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { getParentList } from '@/api/productCategory'
import { onMounted, reactive } from 'vue'
import { ElCol, ElTable, ElTableColumn } from 'element-plus'

const treeData = reactive([])
onMounted(() => {
    getList()
    getParentLists()
})
const getParentLists = async () => {
    const res = await getParentList(0)
    treeData.splice(0, treeData.length)
    res.forEach((item) => {
        treeData.push(item)
    })
}
</script>

<style scoped></style>
